<template>
  <div class="did-h">
    <el-card class="box-card">
      <div class="separator">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/tacticaChainlList' }">战术链列表</el-breadcrumb-item>
          <el-breadcrumb-item>战术链人员信息</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </el-card>

    <div class="table">
      <!-- 表格 -->
      <el-table :data="dataList" ref="multipleTable"  tooltip-effect="dark" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column type="index" width="150" label="序号" align="center"> </el-table-column>
        <el-table-column prop="userName" label="成员名称" width="200" align="center"></el-table-column>
        <el-table-column prop="userDid" label="成员DID" width="400" align="center"></el-table-column>
        <el-table-column prop="joinTime" label="加入时间" width="300" align="center"></el-table-column>
        <el-table-column prop="state" label="状态" width="200" align="center"> </el-table-column>
        <el-table-column prop="personnel" label="人员操作"  min-width="100%" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-user-solid" size="small" @click="queryMembersInfo(scope.row)" align="center">用户信息</el-button>
            <!-- <el-button type="warning" icon="el-icon-user-solid" size="small">冻结人员</el-button> -->
            <el-button type="danger" icon="el-icon-user-solid" size="small" @click="deleteMembersInfo(scope.row)" align="center">删除人员</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        layout="prev, pager, next,sizes"
        :page-sizes="[5, 20, 50, 100]"
        :total="totalDataCount"
        :page-size="pageSize"
        :current-page="currentPage"
        style="margin-top: 30px"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>

    <el-dialog title="用户详细信息" :visible.sync="dialogTableVisible">
      <el-table :data="userInfo" ref="multipleTable"  tooltip-effect="dark" style="width: 100%" :default-sort="{ prop: 'date', order: 'descending' }">
        <el-table-column prop="name" label="姓名" width="150" align="center"></el-table-column>
        <el-table-column prop="number" label="编号" width="200" align="center"></el-table-column>
        <el-table-column prop="did" label="DID" align="center"></el-table-column>
        <el-table-column prop="user_status" label="状态" align="center"></el-table-column>
        <el-table-column prop="roles" label="角色" align="center"></el-table-column>
        <el-table-column prop="department" label="部门" align="center"></el-table-column>
        <el-table-column prop="create_date" label="创建时间" align="center"></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>
      <script>
import NoData from '../../components/noData.vue';
export default {
  created() {
    this.chainDID = this.$route.query.tacticalChainDid;
    console.info("路由测试");
    console.info(this.chainDID);
    this.getMembersList();
  },
  components: {
    NoData,
  },
  data() {
    return {
      activeName: 'first',
      form: {
        did: '',
        textarea: '',
      },
      chainDID: '0',
      data: '',
      input3: '',
      tableData: [],
      totalDataCount: 20, // 总数据条数
      pageSize: 5, // 每页显示的数据条数
      currentPage: 1, // 当前页码
      dataList: [], // 数据列表
      dialogTableVisible: false, //dialog显示标志位
      userInfo: [], //用户详细信息
    };
  },
  computed: {},
  mounted() {},
  methods: {
    goTochainMemberList() {
      this.$router.push('/chainMemberList');
    },
    async getMembersList() {
      console.log(this.chainDID);

      let formData = new FormData();
      formData.append('chainDID', this.chainDID);
      formData.append('pageNum', this.currentPage);
      formData.append('pageSize', this.pageSize);
      this.tableData = [];

      let res = await this.$http.post(this.$api.tacticalChain.queryMembersByChainDid, formData);
      console.log(res);
      if (res.code == 0) {
        let page = res.page;
        this.totalDataCount = page.total;
        this.dataList = page.records;
        console.log(this.dataList);
      }
    },
    async queryMembersInfo(row) {
      let formData = new FormData();
      formData.append('userDid', row.userDid);
      let res = await this.$http.post(this.$api.tacticalChain.queryMembersInfo, formData);
      if (res.code == 0) {
        this.$message('用户查询成功');
        this.userInfo = res.data;
        this.dialogTableVisible = true;
        console.log(this.userInfo);
      } else {
        this.$message.error('用户信息查询失败');
      }
    },
    async deleteMembersInfo(row) {
      const parmas = [row.userDid];
      console.log(parmas);
      let res = await this.$http.post(this.$api.tacticalChain.deleteMembersInfo, parmas);
      if (res.code == 0) {
        this.$message('用户删除成功');
        console.log('用户删除成功');
      } else {
        this.$message.error('用户删除失败');
      }
      this.getMembersList();
    },
    async changeMembersState() {},
    handlePageChange(page) {
      // 当页码改变时，更新当前页码
      this.currentPage = page;
      this.getMembersList();
    },
    ///当每页显示页数变化的时候
    handleSizeChange(newSize) {
      // 当每页显示条数发生变化时触发的逻辑处理
      console.log('新的每页显示条数:', newSize);
      this.pageSize = newSize;
      // 重新调用接口获取新的分页数据
      this.getMembersList();
    },
  },
};
</script>
      <style lang="less" scoped>
.did-content {
  margin-top: 10%;
  h1 {
    color: #666666;
    width: 320px;
    margin: 0 auto;
  }
}
.did-button {
  width: 100px;
  margin: 0 auto;
  margin-top: 20px;
}
.m-a0 {
  margin: 0 auto;
}
.black-h {
  height: 50%;
}
.black-height {
  height: calc(50% - 90px);
}
.nodata {
  margin-top: 10%;
}
.did-width {
  width: 500px;
  margin: 0 auto;
}
.text-c {
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}
.separator {
  width: 100px;
}

.table {
  margin-trim: 10px;
  margin-top: 10px;
}
</style>
      